<template>
<el-main>
<el-row>
<el-col :span="20" :offset="1">
<el-tabs type="border-card">
<el-tab-pane label="邮件配置">
<el-row > 
      <el-col :span="8" :offset="5" >
        <el-form :model="mailserverData" label-width="180px" size="mini">
          <el-form-item label="邮件服务器地址" prop="host">
            <el-input v-model="mailserverData.host"></el-input>
          </el-form-item>
          <el-form-item label="端口" prop="port">
            <el-input-number v-model="mailserverData.port" :min="0" :max="65535"></el-input-number>
          </el-form-item>
          <el-form-item label="是否启用" prop="status">
            <el-switch
              v-model="mailserverData.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
            ></el-switch>
          </el-form-item>
          <el-form-item label="发送邮箱" prop="fromuser">
            <el-input v-model="mailserverData.fromuser"></el-input>
          </el-form-item>
          <el-form-item label="发送密码" prop="frompassword">
            <el-input type="password" v-model="mailserverData.frompassword"></el-input>
          </el-form-item>
          <el-form-item label="接收邮箱" prop="newpassword2">
            <el-input v-model="mailtoInput">
              <el-button slot="append" icon="el-icon-finished" @click="addmailto"></el-button>
            </el-input>
            <template>
              <div v-for="(item,i) in mailserverData.mailtos" :key="i">
                <el-button type="text" @click="delmailto(i)">删除</el-button>
                <span>{{item}}</span>
              </div>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="warning" @click="dialogmailtest()">测试执行</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    </el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<el-dialog title="测试邮件内容" :visible.sync="dialogFormVisible">
      <el-form :model="mailtestData">
        <el-form-item label="标题" label-width="180px">
          <el-input v-model="mailtestData.sub" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮件内容" label-width="180px">
          <el-input type="textarea" :rows="2" v-model="mailtestData.text" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="mailtest">确 定</el-button>
      </div>
    </el-dialog>
</el-main>
</template>
<script>
export default {
  data() {
    return {
      mailserverData: { mailtos: [] },
      mailtestData: { sub: "youbei邮箱功能测试", text: "测试数据youbeitest" },
      mailtoInput: "",
      dialogFormVisible: false,
      activeValue:"1",
      inactiveValue:"0"
    };
  },
  created() {
    this.getMailserver();
  },
  methods: {
    addmailto() {
      if (this.mailtoInput !== "") {
        this.mailserverData.mailtos.push(this.mailtoInput);
      }
    },
    getMailserver() {
      this.$http.Get(this.$api.mailserver, {}, (res) => {
        if (res.mailtos === null) {
          res.mailtos = [];
        }
        this.mailserverData = res;
      });
    },
    submitForm() {
      this.$http.Put(
        this.$api.mailserver,
        this.mailserverData,
        (res) => {
          console.log(res);
          this.getMailserver();
        }
      );
    },
    delmailto(key) {
      this.mailserverData.mailtos.splice(key, 1);
    },
    mailtest() {
      this.$http.Post(this.$api.mailserver, this.mailtestData, () => {
        this.dialogFormVisible = false;
      });
    },
    dialogmailtest() {
      this.dialogFormVisible = true;
    },
  },
};
</script>